import VueDatepickerLocal from "vue-datepicker-local";

/**
 * 载入项目引导文件
 */
require('./bootstrap');

window.Vue = require('vue');

Vue.component('WebuploaderSingle', require('../components/WebuploaderSingle.vue'));

let mp_data_empty = {
    'type':1,'appid':'','secret':'','token':'','aes_key':'','nick_name':'','head_img':'','is_enable':1,'is_default':0,
};

const app = new Vue({
    el: '#wrapper',
    data:{
        table:null,
        box:null,
        cur_mp_data:{},
        searchParams:{
            type:-1,
            keyword:'',
        },
    },
    watch:{

    },
    mounted:function(){
        let tableOptions = utils.bootstraptableOptions;
        //请求后台的URL
        tableOptions.url = page_params.url_list;
        //搜索参数
        tableOptions.queryParams = (params) => {//传递参数（*）
            //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            var temp = {
                pageSize:params.pageSize,
                page:params.pageNumber,
            };
            return _.merge(temp, this.searchParams);
        };
        tableOptions.columns = [
            {field: 'id',title: '序号'},
            {
                field: 'type',title: '类型',
                formatter:function (value, row, index) {
                    return page_params.data_type_list[value];
                }
            },
            {field: 'appid',title: 'AppID'},
            {field: 'nick_name',title: '微信应用名称'},
            {field: 'head_img',title: '头像',
                formatter:function (value, row, index) {
                    if (value){
                        return '<img alt="image" class="img-circle img-sm" src="' + value + '">';
                    }
                }},
            {field: 'is_enable',title: '使用状态',
                formatter:function (value, row, index) {
                    if (value == 1){
                        return '<span class="label label-info">正常</span>';
                    }else{
                        return '<span class="label label-warning">停用</span>';
                    }
                }
            },
            {field: 'is_from_open',title: '是否开放平台接入',
                formatter:function (value, row, index) {
                    if (value == 1){
                        return '<span class="label label-info">是</span>';
                    }else{
                        return '<span class="label label-warning">否</span>';
                    }
                }
            },
            {field: 'is_default',title: '是否默认',
                formatter:function (value, row, index) {
                    if (value == 1){
                        return '<span class="label label-info">是</span>';
                    }else{
                        return '<span class="label label-warning">否</span>';
                    }
                }
            },
            {field: 'callback_url',title: '微信回调地址'},
            {field: 'created_at',title: '创建时间'},
            {
                field: 'operate',
                title: '操作',
                formatter: function (value, row, index) {
                    if (row.is_from_open){
                        return '';
                    }
                    let buttons = [];
                    if (page_params.url_edit){
                        buttons.push('<button class="btn btn-primary btn-sm btn-edit"><i class="fa fa-book"></i> 编辑</button>');
                    }
                    if (page_params.url_del){
                        buttons.push('<button class="btn btn-warning btn-del"><i class="fa fa-trash"></i> 删除</button>');
                    }
                    return buttons.join("\r\n");
                },//自定义方法，添加操作按钮
                events : {
                    'click .btn-edit':(e, value, row, index) => {
                        this.cur_mp_data = row;
                        this.box = layer.open({
                            type: 1,
                            title: '编辑微信应用',
                            anim: 2,
                            shadeClose: true, //开启遮罩关闭
                            skin: 'layui-layer-molv', //加上边框
                            area: ['600px', '500px'], //宽高
                            content: $('#box-form')
                        });
                    },
                    'click .btn-del': (e, value, row, index) => {
                        utils.confirm(page_params.url_del,{'id':row.id}, (response, data) =>{
                            utils.showToastr(response.data);
                            if (response.data.status == 'success') {
                                layer.close(this.box);
                                this.query();
                            }
                        });
                    }
                }
            },
        ];
        this.table = $("#table").bootstrapTable(tableOptions);
    },
    methods: {
        query: function () {
            this.table.bootstrapTable('refresh');
        },
        add: function () {
            this.cur_mp_data = mp_data_empty;
            this.box = layer.open({
                type: 1,
                title: '新增微信应用',
                anim: 2,
                shadeClose: true, //开启遮罩关闭
                skin: 'layui-layer-molv', //加上边框
                area: ['600px', '500px'], //宽高
                content: $('#box-form')
            });
        },
        save:function () {
            let url_save = this.cur_mp_data.id ? page_params.url_edit : page_params.url_add;
            utils.ajaxPost(url_save, this.cur_mp_data, (response, data) => {
                utils.showToastr(response.data);
                if (response.data.status == 'success') {
                    layer.close(this.box);
                    this.query();
                }
            });
        }
    },
    components: {

    },
});